<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7 no-js" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8 no-js" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html lang="en" class="no-js">

<!-- Mirrored from haintheme.com/demo/html/bustter/moviesingle.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 04 May 2018 04:42:38 GMT -->
<head>
    <!-- Basic need -->
    <title>电影详情</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <link rel="profile" href="#">

    <!--Google Font-->
    <link rel="stylesheet" href='/movie/css/google-font-css.css'/>
    <!-- Mobile specific meta -->
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone-no">

    <!-- CSS files -->
    <link rel="stylesheet" href="/movie/css/plugins.css">
    <link rel="stylesheet" href="/movie/css/style.css">
    <style>
        a {
            cursor: pointer;
        }

        #star img {
            width: 35px;
            height: 35px;
        }
    </style>
</head>
<body>
<!--preloading-->
<div id="preloader">
    <img class="logo" src="/movie/images/logo1.png" alt="" width="119" height="58">
    <div id="status">
        <span></span>
        <span></span>
    </div>
</div>
<!--end of preloading-->
<div id="movie-header"></div>
<div id="main" xmlns:th="http://www.thymeleaf.org">
    <div class="hero mv-single-hero">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!-- <h1> movie listing - list</h1>
                    <ul class="breadcumb">
                        <li class="active"><a href="#">Home</a></li>
                        <li> <span class="ion-ios-arrow-right"></span> movie listing</li>
                    </ul> -->
                </div>
            </div>
        </div>
    </div>
    <div class="page-single movie-single movie_single">
        <div class="container">
            <div class="row ipad-width2">
                <div class="col-md-4 col-sm-12 col-xs-12">
                    <div class="movie-img sticky-sb">
                        <img th:src="'/movie/image/'+${movieVO.imageFileName}" alt="">
                        <div class="movie-btn">
                            <div id="generator-star">
                                <div id="star" hidden="hidden"></div>
                            </div>

                            <input type="hidden" id="rate">
                            <div class="btn-transform transform-vertical red">
                                <div><a onclick="showRateWindow()" class="item item-1 redbtn"> <i
                                        class="ion-android-star"></i> 给该电影打分</a>
                                </div>
                                <div><a onclick="showRateWindow()"
                                        class="item item-2 redbtn hvr-grow"><i class="ion-android-star">点击评分</i></a>
                                </div>
                            </div>
                            <div class="btn-transform transform-vertical">
                                <div><a onclick="showRateWindow()" class="item item-1 yellowbtn"> <i
                                        class="ion-card"></i> 相关推荐</a>
                                </div>
                                <div><a onclick="showRateWindow()" class="item item-2 yellowbtn"><i
                                        class="ion-card"></i></a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 col-sm-12 col-xs-12">
                    <div class="movie-single-ct main-content">
                        <input type="hidden" id="movie-id" th:value="${movieVO.id}">
                        <h1 class="bd-hd" th:text="${movieVO.name}">Skyfall: Quantum of Spectre <span>2015</span></h1>
                        <div class="social-btn">
                            <a onclick="favoriteMovie()" class="parent-btn" id="movie-favorite" th:attr="isFavorite = ${isFavorite}">
                                <i class="ion-heart"></i>
                                <span id="span-favorite" th:text="${isFavorite?'取消喜欢':'标记为喜欢'}"></span>
                            </a>
                            <div class="hover-bnt">
                                <a href="#" class="parent-btn"><i class="ion-android-share-alt"></i>分享该电影</a>
                                <div class="hvr-item">
                                    <a href="#" class="hvr-grow"><i class="ion-social-facebook"></i></a>
                                    <a href="#" class="hvr-grow"><i class="ion-social-twitter"></i></a>
                                    <a href="#" class="hvr-grow"><i class="ion-social-googleplus"></i></a>
                                    <a href="#" class="hvr-grow"><i class="ion-social-youtube"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="movie-rate">
                            <div class="rate">
                                <i class="ion-android-star"></i>
                                <p><span th:text="${movieVO.rate}">8.1</span> /10<br>
                                    <span class="rv" th:text="${movieVO.hot}">56 Reviews</span>
                                </p>
                            </div>
                            <div class="rate-star">
                                <p>电影评分</p>
                                <i class="ion-ios-star"
                                   th:each="i:${#numbers.sequence(0,movieVO.rate-1,1)}"></i>
                                <i class="ion-ios-star-outline"></i>
                            </div>
                        </div>
                        <div class="movie-tabs">
                            <div class="tabs">
                                <ul class="tab-links tabs-mv">
                                    <li class="active"><a href="#overview">电影信息</a></li>
                                    <li><a href="#reviews"> 简介</a></li>
                                </ul>
                                <div class="tab-content">
                                    <div id="overview" class="tab active" des="电影信息">
                                        <div class="row">
                                            <div class="col-md-8 col-sm-12 col-xs-12">
                                                <table class=".am-table-bordered" style="color: rgb(255,254,242);">
                                                    <tr>
                                                        <td>主演</td>
                                                        <td th:text="${movieVO.actors}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>导演</td>
                                                        <td th:text="${movieVO.directors}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>类型</td>
                                                        <td th:text="${movieVO.typeName}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>语言</td>
                                                        <td th:text="${movieVO.language}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>地区</td>
                                                        <td th:text="${movieVO.location}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>片长</td>
                                                        <td th:text="${movieVO.duration}"></td>
                                                    </tr>
                                                    <tr>
                                                        <td>上映日期</td>
                                                        <td th:text="${movieVO.initialReleaseDate}"></td>
                                                    </tr>
                                                </table>
                                                <div class="title-hd-sm">
                                                    <h4>视频 & 图片</h4>
                                                    <a href="#" class="time">共 5 个视频 & 245 张图片 <i
                                                            class="ion-ios-arrow-right"></i></a>
                                                </div>
                                                <div class="mvsingle-item ov-item">
                                                    <a class="img-lightbox" data-fancybox-group="gallery"
                                                       href="/movie/images/uploads/image11.jpg"><img
                                                            src=/movie/images/uploads/image1.jpg alt=""></a>
                                                    <a class="img-lightbox" data-fancybox-group="gallery"
                                                       href="/movie/images/uploads/image21.jpg"><img
                                                            src=/movie/images/uploads/image2.jpg alt=""></a>
                                                    <a class="img-lightbox" data-fancybox-group="gallery"
                                                       href="/movie/images/uploads/image31.jpg"><img
                                                            src=/movie/images/uploads/image3.jpg alt=""></a>
                                                    <div class="vd-it">
                                                        <img class="vd-img" src="/movie/images/uploads/image4.jpg"
                                                             alt="">
                                                        <a class="fancybox-media hvr-grow"
                                                           href="https://www.youtube.com/embed/o-0hcF97wy0"><img
                                                                src="/movie/images/uploads/play-vd.png" alt=""></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="reviews" class="tab review" des="简介">
                                        <div class="row">
                                            <div class="rv-hd">
                                                <div class="div">
                                                    <h3 th:text="${movieVO.description}">
                                                        简介</h3>
                                                </div>
                                                <a href="#" class="redbtn">Write Review</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

<div id="movie-footer"></div>
<script src="/movie/js/jquery.js"></script>
<script src="/movie/js/plugins.js"></script>
<script src="/movie/js/plugins2.js"></script>
<script src="/movie/js/custom.js"></script>
<script src="/movie/js/movie.js"></script>
<script src="/movie/js/do.js"></script>
<script src="/assets/js/md5.js"></script>
<script src="/login/js/login.js"></script>
<script src="/movie/js/plug-in.min.js"></script>
</body>

</html>
<script>
    loadMovieHeader();
    // loadMovieFooter();
</script>